<template>
  <div class="pay">
    <!-- 导航栏开始 -->
    <div class="header">
      <van-sticky>
        <van-nav-bar
          title="订单确认"
          left-text="返回"
          left-arrow
          @click-left="goBack"
        />
      </van-sticky>
    </div>
    <!-- 导航栏结束 -->
    <div class="order">
      <!-- 服务地址开始 -->
      <van-cell-group>
        <van-cell @click="showAddressList" title="服务地址" icon="location-o">
          <template #label>
            <div class="userInfo">
              <div>姓名：{{ selectAddress.username }}</div>
              <div>电话：{{ selectAddress.telephone }}</div>
            </div>
            <div>地址：{{ selectAddress.address }}</div>
          </template>
        </van-cell>
      </van-cell-group>
      <!-- 服务地址结束 -->
      <!-- 订单详情开始 -->
      <van-cell-group>
        <van-cell title="订单详情" icon="orders-o"
          ><template #label>
            <div class="eachOrder" v-for="order in orders" :key="order.id">
              <div>{{ order.productName }}</div>
              <div>¥{{ order.price }}</div>
              <div>×{{ order.number }}</div>
            </div>
            <div class="eachOrder2">
              <div>总计 ¥ {{ total }}</div>
            </div></template
          >
        </van-cell>
      </van-cell-group>
      <!-- 订单详情结束 -->
      <!-- 服务时间开始 -->
      <van-cell-group>
        <van-cell title="服务时间" icon="clock-o">
          <template #extra> {{ time | fmtTime }}</template>
        </van-cell>
      </van-cell-group>
      <!-- 服务时间结束 -->
    </div>
    <!-- 确认提交按钮开始 -->
    <van-button @click="sendMyOrder" plain round type="info"
      >确认提交</van-button
    >

    <!-- 确认提交按钮结束 -->
    <!-- 地址列表动作面板开始 -->
    <van-action-sheet v-model="addressListShow" title="地址列表">
      <div
        class="content"
        v-for="(address, index) in addressInfo"
        :key="index"
        @click="selectedAddressId(address)"
      >
        <div class="person">
          <div class="name">{{ address.name }}</div>
          <div class="tel">{{ address.telephone }}</div>
        </div>
        <div class="address">{{ address.address }}</div>
      </div>
      <van-button class="btn" @click="saveAddress" round type="info"
        >确认</van-button
      >
    </van-action-sheet>
  </div>
</template>

<script>
import { post_json, post_obj_array } from "@/http/axios.js";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "WorkspaceJsonPay",

  data() {
    return {
      title: "新增地址",
      list: {
        page: 1,
        pageSize: 100,
        customerId: +localStorage.getItem("userId"),
      },
      time: new Date().getTime(),
      addressListShow: false,
      chosenAddressId: 0,
      addressList: [],
      selectAddress: {},
      address: {},
    };
  },
  computed: {
    ...mapState("shopcart", ["orderLines", "orders"]),
    ...mapState("sendOrder", ["orderData", "addressInfo", "defaultAddress"]),
    ...mapGetters("shopcart", ["total"]),
  },
  methods: {
    ...mapMutations("shopcart", ["clearShopcart"]),
    ...mapActions("sendOrder", ["getMyOrder", "getAllAddress"]),
    // 返回
    goBack() {
      // 清空购物车
      this.$router.back();
      this.clearShopcart();
    },
    // 显示地址列表
    showAddressList() {
      this.addressListShow = true;
    },
    // 选中的地址
    selectedAddressId(address) {
      this.address = address;
      // 成功通知
      this.$toast.success({
        duration: 500,
        message: "你选择了" + address.name + "的地址",
      });
    },
    // 确认地址
    saveAddress() {
      this.selectAddress = this.address;
      this.addressListShow = false;
    },
    // 提交订单
    sendMyOrder() {
      let data = {
        customerId: localStorage.getItem("userId"),
        addressId: this.selectAddress.id,
        orderLines: this.orders,
        serviceTime: this.time,
      };
      console.log(data);
      post_json("/order/submitOrder", data).then((res) => {
        console.log(res);
        if (res.data.status === 200) {
          this.$notify({
            type: "success",
            message: res.data.message,
          });
          this.$router.push("/manager/order");
        }
      });
    },
  },
  created() {
    this.getMyOrder(this.list);
    // 获取地址信息
    this.getAllAddress(this.list);
    setTimeout(() => {
      this.selectAddress = this.defaultAddress;
      this.chosenAddressId = this.defaultAddress.id;
    }, 100);
  },
};
</script>

<style scoped>
.van-cell-group {
  text-align: left;
  text-indent: 2px;
  margin: 20px 10px;
  box-shadow: 3px 3px 5px rgba(255, 192, 203, 0.7);
}
.eachOrder,
.eachOrder2 {
  display: flex;
  align-items: center;
  justify-content: around;
}
.eachOrder > div {
  width: 30%;
  margin: 0.3em;
}
.eachOrder2 > div {
  width: 50%;
  position: relative;
  right: -50%;
  margin: 0.3em;
}
.userInfo > div {
  display: inline-block;
  margin: 5px 0;
}
.userInfo > div:nth-child(1) {
  width: 40%;
  margin-right: 10px;
}
.userInfo > div:nth-child(2) {
  width: 40%;
}
.content {
  text-align: left;
  margin: 10px 30px;
  box-shadow: 0 0 10px pink;
  padding: 15px 20px;
}
.content:active,
.content:focus {
  background-color: rgb(235, 214, 218);
}
.name,
.tel {
  display: inline-block;
  width: 25%;
}
.address {
  margin-top: 5px;
}
.btn {
  width: 100px;
  background-color: white;
  color: black;
  font-size: 18px;
  border: 1px solid rgb(182, 165, 165);
  margin: 10px;
}
</style>